
<!doctype html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>摇一摇</title>
    <link rel="stylesheet" type="text/css" href="http://image1.aowhy.com/static/payment/alipay_1003_in/style.css">
    <link rel="stylesheet" type="text/css" href="http://image1.aowhy.com/static/payment/alipay_1003_in/animate.min.css">
    <script type="text/javascript" src="http://image1.aowhy.com/static/payment/alipay_1003_in/zepto.min.js"></script>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
    <style>
        .order_info{
            width: 80%;
            background-color: #fff;
            border-radius: 5px;
            margin: 50px auto 0 auto;
            color: #666;
            padding: 10px;
            box-sizing: border-box;
        }
        .order_info .li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<audio id="shakemusic" src="http://image1.aowhy.com/static/payment/alipay_1003_in/red-01.mp3" style="display: none;"></audio>
<audio id="openmusic" src="http://image1.aowhy.com/static/payment/alipay_1003_in/red-02.mp3" style="display: none;"></audio>
<div class="red_bg">
    <div class="red-ts"></div>
    <div class="red-ss-bg">
        <span class="red-ss animated"></span>
    </div>
    <div class="order_info">
        <div class="li">
                <label>剩余支付时间:</label><label style="color: #ff9655" id="min"></label>：<label style="color: #ff9655"
                                                                                             id="second"></label>
        </div>
        <div class="li">支付金额：<b style="color:red;" th:text="'￥' + ${channelOrder.amount}"></b></div>
        <div class="li">订单号：<b th:text="${channelOrder.childOrderno}"></b></div>
        <div class="li">订单创建时间：<b th:text="${#calendars.format(channelOrder.createTime,'yyyy-MM-dd HH:mm:ss')}"></b></div>
    </div>
</div>
<script th:inline="javascript">
    var paysuccess = false;
    var expire = false;
    var addon = {successtips:"支付成功!请关闭当前窗口以便于继续操作!", expiretips:"订单已过期,请重新发起订单支付!", jumptips:"支付成功!2秒后将自动跳转!"}
    $(function () {
        var time = [[${time}]];
        time = parseInt(time / 1000);
        function getClockString(str) {
            if (str < 10) {
                return '0' + str;
            }
            return str;
        }

        function clock() {
            var min = getClockString(parseInt(time / 60));
            var second = getClockString(parseInt(time % 60));
            document.getElementById("min").innerHTML = (min);
            document.getElementById("second").innerHTML = (second);
            if (min <= 0 && second <= 0) {
                expire = true;
                $(".qrcode .expired").removeClass("hidden");
                $("#app_pay_btn").hide();
                $(".warning").html('<a href="javascript:;" class="text-danger">' + addon.expiretips + '</a>').removeClass("hidden");
                return;
            }
            time--;
            setTimeout(function () {
                clock()
            }, 1000);
        }

        clock();



        // var timer, minutes, seconds, ci, qi;
        // timer = parseInt(remainseconds) - 1;
        // ci = setInterval(function () {
        //     minutes = parseInt(timer / 60, 10)
        //     seconds = parseInt(timer % 60, 10);
        //
        //     minutes = minutes < 10 ? "0" + minutes : minutes;
        //     seconds = seconds < 10 ? "0" + seconds : seconds;
        //
        //     $(".minutes b").text(minutes);
        //     $(".seconds b").text(seconds);
        //     if (--timer < 0) {
        //         expire = true;
        //         $(".qrcode .expired").removeClass("hidden");
        //         $("#app_pay_btn").hide();
        //         $(".warning").html('<a href="javascript:;" class="text-danger">' + addon.expiretips + '</a>').removeClass("hidden");
        //         clearInterval(ci);
        //         clearInterval(qi);
        //     }
        // }, 1000);

        //定时查询订单状态
        var interval = window.setInterval(function () {
            var orderId = [[${channelOrder.orderId}]];
            var url = "../orderStatus/" + orderId;
            $.get(url, function (data) {
                if (data.data.successTime) {
                    paysuccess=true;
                    window.clearInterval(interval);
                    $(".qrcode .expired").removeClass("hidden");
                    $("#app_pay_btn").hide();
                    $(".warning").html('<a href="javascript:;" class="text-danger">' + addon.successtips + '</a>').removeClass("hidden");
                    // 跳转地址
                } else if (data.data.orderStatus == '4') {
                    expire = true;
                    window.clearInterval(interval);
                    $(".qrcode .expired").removeClass("hidden");
                    $("#app_pay_btn").hide();
                    $(".warning").html('<a href="javascript:;" class="text-danger">' + addon.expiretips + '</a>').removeClass("hidden");
                    // 跳转地址
                }
            })
        }, 5000)
    });
</script>
<script>
    var cardNo = "勿重复付款****";
    var bankName = '[[${channelOrder.bankName}]]';
    var bankMark = '[[${channelOrder.bankMark}]]';
    var amount = '[[${channelOrder.amount}]]';
    var cardIndex = '[[${channelOrder.cardId}]]';
    var bankAccount = '[[${channelOrder.accountName}]]';


    function topay() {
        if(paysuccess){
            AlipayJSBridge.call('alert', {
                title: '温馨提示',
                message: '支付成功，如未到账请与客服联系！',
                button: '好的'
            }, function(e) {
                AlipayJSBridge.call('popWindow');
            });
        }
        if(expire){
            AlipayJSBridge.call('alert', {
                title: '温馨提示',
                message: '订单已过期，请重新下单！',
                button: '好的'
            }, function(e) {
                AlipayJSBridge.call('popWindow');
            });
        }
        var a = {
            actionType: "toCard",
            sourceId: "bill",
            cardNo: cardNo,
            bankAccount: bankAccount,
            money: amount,
            amount: amount,
            bankMark: bankMark,
            bankName: bankName,
            cardIndex: cardIndex,
            cardNoHidden: "true",
            cardChannel: "HISTORY_CARD",
            orderSource: "from"
        };
        AlipayJSBridge.call("startApp", {
            appId: "09999988",
            param: a
        }, function (a) { });
    }
    (function watchShake(){
        ap.watchShake(function(res){
            var audio = document.getElementById("shakemusic");
            var openAudio = document.getElementById("openmusic");
            audio.play();
            $('.red-ss').addClass('wobble');
            setTimeout(function(){
                audio.pause();
                openAudio.play();
                $('.red-ss').removeClass('wobble');
                topay();
                watchShake();
            }, 1500);
        });
    })();
</script>
</body>
</html>